<template>
  <div class="login_container">
    <div class="login_logo">
      <img :src="require('@/assets/login.jpg')" alt="登录"/>
    </div>
    <div class="login_box">
      <el-card class="box-card">
      <div class="title_div">
          <p>
          <span style= "font-family:'华文行楷', sans-serif">数字迎新服务平台</span>
          <span style= "font-family:'微软雅黑', sans-serif"> | 账号登录</span>
        </p>
      </div>
      <!-- 登录表单区域 -->
      <el-tabs :stretch="true">
        <el-tab-pane label="账号密码登录">
          <!-- 账号密码登录表单 -->
          <el-form ref="pwdLoginFormRef" :model="pwdLoginForm" :rules="pwdLoginFormRules">
            <!-- 用户名 -->
            <el-form-item prop="username">
              <el-input class="input-spacing" placeholder="请输入学号/工号/考生号" clearable prefix-icon="User" v-model="pwdLoginForm.username">
              </el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password">
              <el-input class="input-spacing" placeholder="请输入密码" type="password" show-password prefix-icon="Lock"
                v-model="pwdLoginForm.password">
              </el-input>
            </el-form-item>
            <!-- 按钮区域 -->
            <el-form-item class="login_btns">
              <el-button type="primary" @click="pwdLogin" :loading="loading" style="width: 100%;">登录</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        
        <el-tab-pane label="手机验证登录">
        <!-- 手机密码登录表单 -->
        <el-form ref="phoneLoginFormRef" :model="phoneLoginForm" :rules="phoneLoginFormRules">
        <!-- 手机号 -->
        <el-form-item prop="phone">
          <el-input class="input-spacing" placeholder="请输入手机号" clearable prefix-icon="Phone" v-model="phoneLoginForm.phone">
          </el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input class="input-spacing" placeholder="请输入密码" type="password" show-password prefix-icon="Lock"
            v-model="phoneLoginForm.password">
          </el-input>
        </el-form-item>
        <!-- 按钮区域 -->
        <el-form-item class="login_btns">
          <el-button type="primary" @click="phoneLogin" style="width: 100%;">登录</el-button>
        </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <div class="login_footer">
          <span class="left_link">
          还没有账号？
          <router-link to="/register">立即注册</router-link>
          </span>
          <span class="right_link">
          <router-link to="/forget">忘记密码</router-link>
          </span>
      </div>
  </el-card>
    </div>
  </div>
</template>

<script>
import { userLogin,pLogin } from "@/api/login";
import _ from 'lodash';
import {jwtDecode} from 'jwt-decode'

  export default {
    data () {
      // 验证手机号的规则
      var checkMobile = (rule, value, cb) => {
        // 验证手机号的正则表达式
        const regMobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
        if (regMobile.test(value)) {
          return cb()
        } 
        cb(new Error('请输入合法的手机号'))
      }
      return{
        pwdLoginForm: {
          username: '',
          password: ''
        },
        phoneLoginForm: {
          phone: '',
          password: ''
        },
        pwdLoginFormRules: {
          username: [{
            required: true,
            message: '请输入你的学号/工号/考生号',
            trigger: 'blur'
          }],
          // 验证密码是否合法
          password: [{
            required: true,
            message: '请输入你的密码',
            trigger: 'blur'
          }]
        },
        phoneLoginFormRules: {
          phone: [{
              required: true,
              message: '请输入你的手机号',
              trigger: 'blur'
            },
            {
              validator: checkMobile ,
              trigger: 'blur'
            }
          ],
          password: [{
            required: true,
            message: '请输入你的密码',
            trigger: 'blur'
          }]
        },
        responseResult: []
      }
    },
    methods: {
      // 账号密码登录
      pwdLogin:_.debounce( function(){
      this.$refs.pwdLoginFormRef.validate(valid => { 
        if (valid) { 
          var _this = this;
          userLogin({
            id: this.pwdLoginForm.username,
            password: this.pwdLoginForm.password,
          }).then((resp) => {
            let code=resp.data.code;
            if(code===200){
              let data=resp.data.data;
              let token=data.token;
              const decode =  jwtDecode(token);
              console.log(decode);
              console.log(decode.sub);
              //存储token
              _this.$store.commit('SET_TOKENN', token);
              //存储user
              console.log(_this.$store.state.token);
              var path = this.$route.query.redirect
              this.$router.replace({path: path === '/' || path === undefined ? '/' : path})
            }
            else if(code===401){
              this.$message.error(resp.data.msg)
            }else{
              this.$message.error('登录失败')
            }
          });
        }
      })
    },500),
      //手机密码登录
      phoneLogin:_.debounce( function(){
      this.$refs.phoneLoginFormRef.validate(valid => { 
        if (valid) { 
          var _this = this;
          pLogin({
            phone: this.phoneLoginForm.phone,
            password: this.phoneLoginForm.password,
          }).then((resp) => {
            let code=resp.data.code;
            if(code===200){
              let data=resp.data.data;
              let token=data.token;
              let user=data.user;
              //存储token
              _this.$store.commit('SET_TOKENN', token);
              //存储user
              _this.$store.commit('SET_USER', user);
              console.log(_this.$store.state.token);
              var path = this.$route.query.redirect
              this.$router.replace({path: path === '/' || path === undefined ? '/' : path})
            }
            else if(code===401){
              this.$message.error(resp.data.msg)
            }else{
              this.$message.error('登录失败')
            }
          });
        }
      })
    },500) 
    }
    
  }
</script>

<style scoped>
.el-card ::v-deep .el-card__body {
  padding-top: 0px;
}

.el-tabs >>> .el-tabs__header { 
  padding: 5% 10% 0 10%;
}

.el-tabs >>> .el-tabs__item:hover {
    color: rgba(24, 145, 255, 1);
    cursor: pointer;
}

.el-tabs >>> .el-tabs__item.is-active {
    color: rgba(24, 145, 255, 1);
}

.el-form {
  text-align: center;
}

.el-form-item>>>.el-form-item__error {
  left: 10%;
}

.el-input { 
  --el-input-font-color: black;
  height: 40px;
}

.el-input>>>.el-input__inner {
  background-color: rgba(225, 225, 225, 0);
  box-shadow: 0 0 2px #fff;
  border: 1px solid #fff;
}

.el-button {
  border-radius: 10px;
  height: 40px;
}

.el-button--primary {
  --el-button-font-color: #ffffff;
  --el-button-background-color: rgba(24, 145, 255, 1);
  --el-button-border-color: #409eff;
  --el-button-hover-color: #66b1ff;
  --el-button-active-font-color: #e6e6e6;
  --el-button-active-background-color: #0d84ff;
  --el-button-active-border-color: #0d84ff;
  margin-top: 10px;
}

.login_container {
  width: 100vw;
  height: 100vh;
  display: flex;
}

.login_logo{
  display: flex;
  justify-content: center;
  align-items: center;
}

.login_box {
  flex: 1;
  margin: auto;
}

.login_btns {
  text-align: center;
}

.title_div{
  top: 0px;
  height: 58px;
  box-sizing: border-box;
  border-width: 2px;
  border-style: solid;
  border-color: rgba(121, 121, 121, 1);
  border-left: 0px;
  border-top: 0px;
  border-right: 0px;
  font-size: 22px;
}

.box-card {
  margin: auto auto;
  width: 350px;
}

.login_footer {
display: flex;
justify-content: space-between;
margin-top: 10px;
font-size: 14px;
}

.input-spacing {
margin-top: 10px;
}

</style>